<template>
	<view class="my-page">
		<view class="main">
			<view class="title">
				<view class="setting" @click="go_setting"></view>
			</view>
			<view class="userInfo">
				<view class="avatar" :style="{ backgroundImage: 'url(' + userInfo.avatar + ')' }">

				</view>
				<view class="username">
					{{userInfo.nickname}}
				</view>
			</view>
			<view class="info-tool">
				<view class="wallet" @click="go_wallet">
					<view class="text">
						￥{{userInfo.money}}
					</view>
					<view class="title">
						<view class="icon"></view>
						<view class="text">
							钱包
						</view>
					</view>
				</view>
				<view class="integral" @click="go_integral">
					<!-- <view class="text">
						0
					</view>
					<view class="title">
						<view class="icon"></view>
						<view class="text">
							积分
						</view>
					</view> -->
				</view>
				<view class="collection" @click="go_collection">
					<!-- 	<view class="text">
						0
					</view>
					<view class="title">
						<view class="icon"></view>
						<view class="text">
							收藏
						</view>
					</view> -->
				</view>
			</view>
			<view class="function">
				<view class="my-trade">
					<view class="title">
						我的交易
					</view>
					<view class="list">
						<view class="list-item" v-for="(item,index) in list1" :key="index"
							@click="list1Click(item,index)">
							<view class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></view>
							<view class="text">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>
				<swiperWapper></swiperWapper>
				<view class="my-serve">
					<view class="title">
						我的服务
					</view>
					<view class="list">
						<view class="list-item" v-for="(item,index) in list2" :key="index"
							@click="list2Click(item,index)">
							<view class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></view>
							<view class="text">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar current="3"></tabbar>
	</view>
</template>

<script>
	import {
		http
	} from '@/api/index.js'
	import tabbar from '../../components/tabbar.vue';
	import swiperWapper from "../../components/swiper.vue"
	export default {
		data() {
			return {
				// list1: [{
				// 	id: 1,
				// 	text: "我的购买",
				// 	icon: "../../static/my/list1_1.svg"
				// }, {
				// 	id: 2,
				// 	text: "充值记录",
				// 	icon: "../../static/my/list1_2.svg"
				// }, {
				// 	id: 3,
				// 	text: "浏览历史",
				// 	icon: "../../static/my/list1_3.svg"
				// }],

				list1: [{
					id: 1,
					text: "提现记录",
					icon: "../../static/my/list1_4.svg"
				}, {
					id: 2,
					text: "充值记录",
					icon: "../../static/my/list1_2.svg"
				}, {
					id: 3,
					text: "资金流水",
					icon: "../../static/my/list1_3.svg"
				}],
				list2: [{
					id: 1,
					text: "我的steam",
					icon: "../../static/my/list2_1.svg"
				}, {
					id: 2,
					text: "实名认证",
					icon: "../../static/my/list2_2.svg"
				}, {
					id: 3,
					text: "帮助中心",
					icon: "../../static/my/list2_4.svg"
				}],
				//用户信息
				userInfo: {
					nickName: "123"
				},
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		components: {
			tabbar,
			swiperWapper
		},
		onShow() {
			// let token = uni.getStorageSync('token')
			// if (!token) {
			// 	uni.navigateTo({
			// 		url: '/pages/login/login'
			// 	})
			// 	return
			// }
			this.getUserInfo()
			this.getSetting()
		},
		methods: {
			//获取网站配置
			getSetting() {
				http.post('/api/index/getSetting').then(res => {
					document.documentElement.style.setProperty('--bg-color', res.theme_color);
					document.documentElement.style.setProperty('--text-color', res.font_color);
				}).catch(err => {
					console.log(err);
				})
			},
			//获取会员资料
			getUserInfo() {
				http.post('/api/account/getUserInfo').then(res => {
					this.userInfo = res;
				}).catch(err => {
					// console.log("err", err);
				})
			},
			//设置
			go_setting() {
				uni.navigateTo({
					url: "/pages/my/setting/setting"
				})
			},
			//钱包
			go_wallet() {
				uni.navigateTo({
					url: "/pages/my/wallet/wallet"
				})
			},
			//积分
			// go_integral() {
			// 	uni.showToast({
			// 		title: "功能暂未开放！",
			// 		icon: "none",
			// 		duration: 1000
			// 	})
			// },
			//收藏
			// go_collection() {
			// 	uni.showToast({
			// 		title: "功能暂未开放！",
			// 		icon: "none",
			// 		duration: 1000
			// 	})
			// },
			//我的交易类
			list1Click(item, index) {
				if (item.id == 1) {
					uni.navigateTo({
						url: "/pages/my/wallet/payouts_history/payouts_history"
					})
				} else if (item.id == 2) {
					uni.navigateTo({
						url: "/pages/my/wallet/recharge_history/recharge_history"
					})
				} else if (item.id == 3) {
					uni.navigateTo({
						url: "/pages/my/alter_history/alter_history"
					})
				} else {
					uni.showToast({
						title: "功能暂未开放！",
						icon: "none",
						duration: 1000
					})
				}
			},
			//我的服务类
			list2Click(item, index) {
				if (item.id == 1) {
					uni.navigateTo({
						url: "/pages/my/steam/steam"
					})
				} else if (item.id == 2) {
					uni.navigateTo({
						url: "/pages/my/setting/Account_Security/realName/realName"
					})
				} else if (item.id == 3) {
					uni.navigateTo({
						url: "/pages/my/help_center/help_center"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.my-page {
		width: 100%;
		height: 100vh;

		.main {
			width: 100%;
			height: calc(100% - 140rpx);
			background-color: var(--bg-color);
			overflow-y: scroll;

			>.title {
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: end;
				background-color: var(--bg-color);

				.setting {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
					background-image: url("../../static/my/setting.svg");
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
				}
			}

			.userInfo {
				width: 100%;
				height: 200rpx;
				display: flex;
				align-items: center;
				background-color: var(--bg-color);
				color: var(--text-color);

				.avatar {
					width: 120rpx;
					height: 120rpx;
					background-color: white;
					margin-left: 30rpx;
					border-radius: 50%;
					overflow: hidden;
					background-image: url("/static/avatar.jpg") !important;
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					background-color: black;
				}

				.username {
					width: 400rpx;
					height: 80rpx;
					margin-left: 30rpx;
					line-height: 80rpx;
					font-weight: bold;
					font-size: 36rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.info-tool {
				width: 100%;
				height: 130rpx;
				background-color: var(--bg-color);
				display: flex;
				justify-content: space-around;

				>view {
					width: 200rpx;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-evenly;
					font-weight: bold;
					font-size: 28rpx;
					color: var(--text-color);

					.title {
						display: flex;
						align-items: center;
					}
				}

				.wallet {
					.title {
						.icon {
							width: 35rpx;
							height: 35rpx;
							background-image: url("../../static/my/wallet.svg");
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
							margin-right: 10rpx;
						}
					}
				}

				.integral {
					.title {
						.icon {
							width: 35rpx;
							height: 35rpx;
							background-image: url("../../static/my/integral.svg");
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
							margin-right: 10rpx;
						}
					}
				}

				.collection {
					.title {
						.icon {
							width: 35rpx;
							height: 35rpx;
							background-image: url("../../static/my/collection.svg");
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
							margin-right: 10rpx;
						}
					}
				}
			}

			.function {
				width: 94%;
				margin: auto;
				background-color: var(--bg-color);
				color: var(--text-color);

				.my-trade,
				.my-serve {
					width: 100%;
					height: auto;
					margin-bottom: 20rpx;

					.title {
						width: 100%;
						height: 100rpx;
						line-height: 100rpx;
						border-bottom: 1px solid #ccc;
						font-weight: bold;
						font-size: 30rpx;
					}

					.list {
						width: 100%;
						height: auto;
						display: flex;
						// flex-wrap: wrap;
						margin-top: 30rpx;

						.list-item {
							width: 150rpx;
							height: 150rpx;
							margin-right: 50rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-evenly;

							.icon {
								width: 70rpx;
								height: 70rpx;
								background-size: contain;
								background-position: center;
								background-repeat: no-repeat;
							}

							.text {
								font-size: 24rpx;
							}
						}
					}
				}

				.my-serve {
					width: 100%;
					height: auto;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>